
<template>
  <div class="qrcode-content" :style="{width:size*scale+'px'}">
    <vue-qr :text="text" :margin="margin" colorDark="#000" colorLight="#fff" :logoSrc="logoSrc" :logoCornerRadius="4" :logoScale="logoScale" :size="size"></vue-qr>
  </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
  components: {
    VueQr,
  },
  props: {
    text: {
      type: String,
    },
    size: {
      type: Number,
      default: 400,
    },
    logoScale: {
      type: Number,
      default: 0.2,
    },
    logo: "",
    margin: {
      type: Number,
      default: 0,
    },
    scale: {
      type: Number,
      default: 0.5,
    }
  },
  data() {
    return {
      logoSrc: ""
    }
  },
  watch: {
    logo(val) {
      this.logoSrc = val;
    },
    text() {
      console.log(this.text);
    },
  },
  mounted() {
    console.log(this.text);
    this.logoSrc = this.logo;
  },
  methods: {

  }
}
</script>
<style lang="scss">
.qrcode-content {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  position: relative;
  // box-shadow: 0 0 5px 0px #ddd;
  background: #fff;
}
</style>